<script setup>
import { personGetDutyServe, personGetTimeOnlyServe } from '@/api/person'
import { useFormatStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

//获取格式
const formatStore = useFormatStore()
const { format, allWeek, columnLabels } = storeToRefs(formatStore)
// 时长
const personalTime = ref(0)
const getPersonalTime = async (id) => {
  const res = await personGetTimeOnlyServe(id)
  personalTime.value = res.grade
}
//值班情况
const week = ref(0)
const thisWeek = ref(-1)
const person = ref({})
const dutyList = ref([])
const drawerVisible = ref(false)
//获取排班
const getDutyListLoading = ref(false)
const getDutyList = async (stu_id) => {
  getDutyListLoading.value = true
  let obj = { stu_id: stu_id }
  if (week.value) obj = { ...obj, week: week.value }
  const res = await personGetDutyServe(obj)
  week.value = res.week
  if (thisWeek.value === -1) thisWeek.value = res.week
  dutyList.value = res.record
  getDutyListLoading.value = false
  if (week.value > thisWeek.value) ElMessage.warning({ message: '值班未安排', offset: 70 })
  else ElMessage.success({ message: '获取成功', offset: 70 })
}
const onShowDuty = (row) => {
  week.value = 0
  person.value = { name: row.name, stu_id: row.stu_id }
  getDutyList(row.stu_id)
  getPersonalTime(row.stu_id)
  drawerVisible.value = true
}

defineExpose({
  onShowDuty
})
</script>

<template>
  <el-drawer v-model="drawerVisible" title="值班记录" direction="rtl" size="50%">
    <div style="display: flex; align-items: center; justify-content: space-between">
      <strong>姓名:{{ person.name }}</strong>
      <strong>学号:{{ person.stu_id }}</strong>
      <strong>当月值班时长:{{ personalTime }}小时</strong>
    </div>
    <div style="margin-top: 10px; margin-bottom: 10px">
      <div v-if="thisWeek !== -1">
        <span>今日是第{{ thisWeek }}周</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span>查看第&nbsp;</span>
        <el-select v-model="week" placeholder="Select" style="width: 70px">
          <el-option v-for="item in allWeek" :key="item" :label="item" :value="item" />
        </el-select>
        <span>&nbsp;周</span>
        &nbsp;&nbsp;&nbsp;
        <el-button type="primary" size="default" @click="getDutyList(person.stu_id)">
          查询
        </el-button>
      </div>
    </div>
    <div>
      <el-table :data="format" style="width: 100%" border v-loading="getDutyListLoading">
        <!-- 表左边 -->
        <el-table-column label="时间" prop="" width="120px" align="center">
          <template #default="{ row }">
            <div>{{ row.index }}</div>
            {{ row.start + '-' }}{{ row.end }}
          </template>
        </el-table-column>
        <!-- 主体 -->
        <el-table-column
          v-for="(label, index) in columnLabels"
          :key="index"
          :label="label"
          align="center"
        >
          <template v-slot="scope">
            <div
              :style="{
                color: dutyList[index * 5 + scope.$index] === 1 ? '#409EFF' : ''
              }"
            >
              {{ dutyList[index * 5 + scope.$index] === 1 ? '上班' : '' }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-drawer>
</template>

<style lang="" scoped></style>
